.wrapper{
  background: transparent;
  cursor: default;
}

#member:target ~ .wrapper,
#m1:target ~ .wrapper,
#m2:target ~ .wrapper,
#m3:target ~ .wrapper,
#m4:target ~ .wrapper,
#m5:target ~ .wrapper,
#m6:target ~ .wrapper{
  opacity: 0;
  transform: translateX(-55rem) scale(.6) rotate(-90deg);
}

#about:target ~ .wrapper{
  opacity: 0;
  transform: translateX(55rem) scale(.6) rotate(90deg);
}

.wrapper h1{
  color: #fff;
  font-family: 'Barrio', cursive;
  font-size: 5rem;
  font-weight: normal;
  text-align: center;
  user-select: none;
  animation: dropDown 1s ease-in-out forwards;
}

.wrapper p{
  opacity: 0;
  widows: 100%;
  color: #fff;
  user-select: none;
  animation: fadeIn 1s ease forwards;
  animation-delay: .6s;
}

.wrapper a{
  position: relative;
  display: inline-block;
  margin: 0 .2rem;
  padding: 0 .2rem;
  color: #fff;
}

.wrapper a:before{
  content: "";
  position: absolute;
  top: -0.46rem;
  left: 0;
  right: 0;

  margin: auto;
  width: 0;
  height: 0;
  border: .6rem solid transparent;
  border-top-width: .4rem;
  border-top-color: rgba(255, 255, 255, 0.42);
}

.wrapper a:after{
  content: attr(data-title);
  position: absolute;
  top: -100%;
  right: 0;
  left: 0;

  margin: 0 -1.4rem;
  padding: .12rem 0;
  border-radius: .2rem;
  word-break: keep-all;
  background: rgba(255, 255, 255, 0.42);
}

.wrapper a:before, .wrapper a:after{
  opacity: 0;
  transform: translateY(1rem);
  transition: all .32s ease;
}

.wrapper a:hover:before, .wrapper a:hover:after{
  opacity: 1;
  transform: translateY(0);
}

.wrapper i{
  font-size: 1.5rem;
}

@keyframes fadeIn{
  from{
    opacity: 0;
  }
  to{
    opacity: 1;
  }
}

@keyframes dropDown{
  from{
    opacity: 0;
    transform: translateY(-4rem);
  }

  to{
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes changeBgColor{

  0%, 100%{
    background: #00bcd4
  }

  25%{
    background: #2196f3;
  }

  50%{
    background: #7abc65;
  }

  75%{
    background: #4caf50;
  }
}

@media only screen and (max-width: 640px) {
  .wrapper{
    flex-direction: inherit;
  }

  .wrapper h1{
    font-size: 3.6rem;
  }

  .wrapper a:before, .wrapper a:after{
    display: none;
  }
}